<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 表格布局
 * @ignore
 */


var $ = require(&#39;jquery&#39;),
	BUI = require(&#39;bui-common&#39;),
	Abstract = require(&#39;./abstract&#39;),
	Item = require(&#39;./item/cell&#39;);

<span id='BUI-Layout-Table'>/**
</span> * @class BUI.Layout.Table
 * 表格布局
 * @extends BUI.Layout.Abstract
 * &lt;pre&gt;
 * 	&lt;code&gt;
 * 	var layout = new Table({
			rows : 4,
			columns : 4
		}),
			control = new BUI.Component.Controller({
			width:600,
			height:500,
			render : &#39;#J_Layout&#39;,
			elCls : &#39;layout-test&#39;,
			defaultChildClass : &#39;controller&#39;,
			children : [
				{
					layout : {
						row : 0,
						height : 50
					},
					content : &#39;1&#39;
				},{
					layout : {
						row : 0
					},
					content : &#39;2&#39;
				},{
					layout : {
						row : 0
					},
					content : &#39;3&#39;
				},{
					layout : {
						row : 0,
						rowspan : 4
					},
					content : &#39;4&#39;
				},

				{
					layout : {
						row : 1,
						colspan : 2,
						height : 100
					},
					content : &#39;5&#39;
				},{
					layout : {
						row : 1
					},
					content : &#39;6&#39;
				},

				{
					id:&#39;7&#39;,
					layout : {
						row : 2
					},
					content : &#39;7&#39;
				},{
					layout : {
						row : 2,
						colspan : 2,
						rowspan:2
					},
					id : &#39;8&#39;,
					content : &#39;8&#39;
				},

				{
					id:&#39;9&#39;,
					layout : {
						row : 3
					},
					content : &#39;9&#39;
				}

			],
			plugins : [layout]
		});

		control.render();
 * 	&lt;/code&gt;
 * &lt;/pre&gt;
 */
var Table = function(config){
	Table.superclass.constructor.call(this,config);
};

Table.ATTRS = {
	itemConstructor : {
		value : Item
	},
<span id='global-property-lastRow'>	/**
</span>	 * @private
	 * @ignore
	 * lastRow 当前最后一行的值
	 */
	lastRow : {
		value : 0
	},
<span id='BUI-Layout-Table-property-tpl'>	/**
</span>	 * 布局的模板
	 * @type {String}
	 */
	tpl : {
		value : &#39;&lt;table class=&quot;x-layout-table&quot;&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;&#39;
	},
	defaultCfg : {
		value : {fit : &#39;both&#39;}
	},
<span id='BUI-Layout-Table-property-columns'>	/**
</span>	 * 列的数目
	 * @type {Number}
	 */
	columns : {

	},
<span id='BUI-Layout-Table-property-rows'>	/**
</span>	 * Number
	 * @type {Object}
	 */
	rows : {

	},
<span id='BUI-Layout-Table-property-itemTpl'>	/**
</span>	 * 单元格的模板
	 * @type {String}
	 */
	itemTpl : {
		value : &#39;&lt;td class=&quot;x-layout-item-cell&quot;&gt;&lt;/td&gt;&#39;
	}
};

BUI.extend(Table,Abstract);

BUI.augment(Table,{
	
<span id='BUI-Layout-Table-method-afterWraper'>	/**
</span>	 * @protected
	 * 容器初始化完毕开始渲染布局子项
	 */
	afterWraper : function(){
		var _self = this,
			rows = _self.get(&#39;rows&#39;),
			container = _self.get(&#39;container&#39;),
			arr = [];
		for (var i = 0; i &lt; rows; i++) {
			arr.push(&#39;&lt;tr&gt;&lt;/tr&gt;&#39;);
		};
		container.find(&#39;tbody&#39;).html(arr.join(&#39;&#39;));
	},
<span id='BUI-Layout-Table-method-getItemContainer'>	/**
</span>	 * @protected
	 * 获取布局选项的容器
	 */
	getItemContainer : function(itemAttrs){
		var _self = this,
			container = this.get(&#39;container&#39;);
		return $(container.find(&#39;tr&#39;)[itemAttrs.row]);
	},
	//获取单元格附加的高度
	_getItemAppend : function(){
		var _self = this,
			append = _self.get(&#39;appendHeight&#39;);
		if(append == null){
			var item = _self.getItemAt(0),
				el;
			if(item){
				append = {};
				el = item.get(&#39;el&#39;);
				append.width = el.outerHeight() - el.height();
				append.height = el.outerWidth() - el.width();
				_self.set(&#39;append&#39;,append);
			}
		}
		return append || {width :0,height : 0};
	},
	_getCellAvg : function(){
		var _self = this,
			control = _self.get(&#39;control&#39;),
			count = _self.get(&#39;rows&#39;),
			height = control.get(&#39;height&#39;),
			width = control.get(&#39;width&#39;),
			append = _self._getItemAppend(),
			avgHeight = (height - append.height * count) / count,
			avgWidth = (width - append.width * count) / count;

		return {
			append : append,
			avgHeight : avgHeight,
			avgWidth : avgWidth
		};
	},
	//获取单元格的高度,高度
	_getItemDime : function(rowspan,colspan){
		var _self = this,
			avg = _self._getCellAvg();

		rowspan = rowspan || 1;
		colspan = colspan || 1;

		return {
		  height :	avg.avgHeight * rowspan + (rowspan - 1) * avg.append.height,
		  width : avg.avgWidth * colspan + (colspan -1) * avg.append.width
		};
	},
<span id='BUI-Layout-Table-method-resetLayout'>	/**
</span>	 * @protected
	 * 重置布局，子类覆盖此类
	 */
	resetLayout : function(){
		var _self = this,
		 	items = _self.getItems();

		BUI.each(items,function(item){
			var diem = _self._getItemDime(item.get(&#39;rowspan&#39;),item.get(&#39;colspan&#39;));
			item.set(diem);
		});

		Table.superclass.resetLayout.call(this);
	},
<span id='BUI-Layout-Table-method-afterInitItems'>	/**
</span>	 * 布局选项初始化完毕
	 * @protected
	 */
	afterInitItems : function(){
		this.resetLayout();
	}
});

module.exports = Table;
</pre>
</body>
</html>
